<style lang="scss" scoped>

  $width:940px;

  $font-color:#777;

  .add-dialog{
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    display: block;
    background: rgba(0,0,0,0.3);
    -webkit-user-drag: none;
    user-select: none;
  }

  .add-inner{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    display: block;
    background: white;
    width:$width;
    height: 800px;
    box-shadow: 0 0 10px rgba(0,0,0,1);
    border-radius: 5px;
    padding: 20px;
  }

  .wrapper{
    float: left;
    height: 760px;
    width:100%;
    display: block;
    overflow-y: scroll;
  }



  .add-header{
    width:100%;
    height: 50px;
    border-bottom: 2px solid $font-color;

    .header-title{
      margin:0px;
      padding: 0px;
      color: $font-color;
      font-family: '微软雅黑';
    }

  }



  .input-info-group{
    width:100%;
    height: auto;
    clear: both;
    float: left;
    padding-top: 30px;
  }

  .base-info-header{
    color: #ccc;
    font-size: 20px;
    font-family: '微软雅黑';
    display: block;
    float: left;
    width:100%;
    height: 30px;
    line-height: 30px;
  }

  .tips-text{
    width:100%;
    height: 30px;
    line-height: 30px;
    color: $font-color;
    font-size: 16px;
    font-family: '微软雅黑';
  }


</style>

<template>
  <div class="add-dialog" @click="closeLayer">
    <div class="add-inner">
      <div class="wrapper">
        <div class="add-header">
          <h2 class="header-title">项目编辑</h2>
        </div>

        <div class="input-info-group">
          <span class="base-info-header">基本信息</span>
          <input-box label="项目编号" :label-width="80" v-model="project.project_num" placeholder="请输入项目编号" :disabled="true"></input-box>
          <input-box label="项目名称" :label-width="80" v-model="project.project_name" placeholder="请输入项目名称" :disabled="true"></input-box>
          <input-box label="标段名称" :label-width="80" v-model="project.sction_name" placeholder="请输入标段名称" :disabled="true"></input-box>
          <input-box label="总体投资" :label-width="80" v-model="project.invest" placeholder="请输入总体投资" :disabled="true">
            <span slot="other">元</span>
          </input-box>
          <select-box :options="template.projectCategory" :disabled="true"  label="项目类型" :label-width="80" v-model="project.project_type" placeholder="请选择项目类型"></select-box>
          <input-box label="项目时间" type="date" :disabled="true" :label-width="80" v-model="project.project_time" placeholder="请选择时间"></input-box>
          <select-box :options="template.investCategory"  label="投资模式" :disabled="true" :label-width="80" v-model="project.investment_patterns" placeholder="请选择投资模式"></select-box>
          <input-box label="资金来源" :label-width="80" v-model="project.money_source" :disabled="true" placeholder="请选择资金来源"></input-box>
          <select-box :options="template.plans" :disabled="true" label="符合城市规划" :label-width="100" v-model="project.iscity_plan"></select-box>
          <select-box  :options="template.plans" :disabled="true" label="符合土地利用规划" :label-width="140" v-model="project.island_plan"></select-box>
        </div>

        <div class="input-info-group">
          <span class="base-info-header">施工信息</span>
          <input-box label="建设单位" :size="2" :label-width="80" v-model="project.construction_organeation" :disabled="true" placeholder="请输入建设单位">
            <!--<span class="icon-search" slot="other" ></span>-->
          </input-box>



          <input-box label="施工负责人" :label-width="80" v-model="project.project_manager" placeholder="请填写施工负责人"></input-box>

          <input-box label="合同工期" :label-width="80" v-model="project.contract_time" placeholder="请填写合同工期"></input-box>
        </div>

        <div class="input-info-group">
          <span class="base-info-header">监理信息</span>
          <input-box label="监理单位" :label-width="80" :size="2" v-model="project.jianli_company" :disabled="true">
            <!--<span class="icon-search" slot="other"></span>-->
          </input-box>
          <input-box label="监理负责人" :label-width="80" v-model="project.jianli_name" placeholder="请输入监理负责人"></input-box>
        </div>

        <div class="input-info-group">
          <span class="base-info-header">申报信息</span>
          <input-box label="申报类型" :label-width="80" v-model="project.apply_type" placeholder="请输入申报类型"></input-box>
          <input-box label="申报单位" :label-width="80" v-model="project.apply_complay" placeholder="请输入申报单位"></input-box>
          <input-box label="申报人" :label-width="80" v-model="project.apply_user" placeholder="请输入申报人"></input-box>
          <input-box label="创建时间" :label-width="80" v-model="project.created_at" :disabled="true" ></input-box>
        </div>
        <div class="input-info-group">
          <upload :exsits="project.file" @loadedFile="createFile" @onDeleteExsit="deleteFile" @onDelete="dropFile"></upload>
          <span class="tips-text">[ 默认保存信息后以消息形式通知代理单位 ]</span>
        </div>
        <div class="input-info-group">
          <el-button @click="update">更新</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import InputBox from '../AddProject/InputBox/Index';

  import SelectBox from "../AddProject/SelectBox/Index";

  import Upload from '../../../../components/Dialog/Load/index';

  import { Button } from "element-ui";

  import { mapState } from "vuex";

  import { INVEST_TYPE,PROJECT_TYPE,LAND_TYPE } from "@/conf/options";

  export default {
    name:"AddProject",
    components:{
      InputBox,
      Upload,
      SelectBox,
      'ElButton':Button
    },
    computed: mapState({
      loading: state => {
        return state.loading;
      },
      user:state => state.user.userData
    }),
    created(){

      var id = this.$route.params.id;

      if(id==undefined){

        this.$message("待修改的项目参数错误!");

        this.$router.go(-1);

      }
      else {

        this.project.id=id;

        this.$store.dispatch('getSingeProject',{
          pId:id,
          token:this.user.token
        }).then(res =>{

          if (res.status==200&&res.statusText=="OK"){

              this.project['created_at']=res.data["created_at"];

              this.project["project_num"]=res.data["project_num"];
              this.project["project_name"]=res.data["project_name"];
              this.project["sction_name"]=res.data["sction_name"];
              this.project["invest"]=res.data["invest"];
              this.project["project_type"]=res.data["project_type"];
              this.project["project_time"]=res.data["project_time"];
              this.project["construction_organeation"]=res.data["construction_organeation"];
              this.project["investment_patterns"]=res.data["investment_patterns"];
              this.project["money_source"]=res.data["money_source"];
              this.project["iscity_plan"]=res.data["iscity_plan"];
              this.project["island_plan"]=res.data["island_plan"];
              this.project["project_manager"]=res.data["project_manager"];
              this.project["contract_time"]=res.data["contract_time"];
              this.project["jianli_company"]=res.data["jianli_company"];
              this.project["jianli_name"]=res.data["jianli_name"];
              this.project["apply_type"]=res.data["apply_type"];
              this.project["apply_complay"]=res.data["apply_complay"];
              this.project["apply_user"]=res.data["apply_user"];
              this.project["status"]=res.data["status"];

              for (var i=0;i<res.data.file.length;i++){

                this.project.file.push(res.data.file[i]);

              }

          }

        },res => {

          console.log(res);

        }).catch(err=>{

          this.$message("系统出错,请求错误，错误信息:"+err);

        });

      }
    },
    data(){
      return {
        pId:-1,
        template:{
          projectCategory:PROJECT_TYPE,
          investCategory:INVEST_TYPE,
          plans:LAND_TYPE
        },
        project:{
          'created_at':"",
          "project_num": "",
          "project_name": "",
          "sction_name": "",
          "invest": "",
          "project_type": -1,
          "project_time": "",
          "construction_organeation": "",
          "investment_patterns": -1,
          "money_source": "",
          "iscity_plan": 0,
          "island_plan": 0,
          "project_manager": "",
          "contract_time": "",
          "jianli_company": "",
          "jianli_name": "",
          "apply_type": "",
          "apply_complay": "",
          "apply_user": "",
          "status": 0,
          file:[]
        }
      }
    },
    methods:{
      /**
       * 删除已经存在的file
       * @param data
       */
      deleteFile(data){

        var index=-1;

        for (var i=0;i<this.project.file.length;i++){

          if (this.project.file[i].id == data.id){

            index = i;

            break;

          }
        }

        if (index>=0){
          this.project.file.splice(index,1);
        }

      },
      dropFile({id}){
        this.deleteFile({id});
      },
      update(){

        this.$confirm('即将更新项目，请仔细核对填写的信息是否正确，点击确认提交，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$store.dispatch('editProject',{
            'token':this.user.token,
            'project':this.project
          }).then((response)=>{


            if(response.status==200&&response.statusText=="OK"&&response.data=="ok"){

              this.$message("修改项目成功");

            }
            else {

              this.$message("修改项目失败,错误信息:"+response.data);

            }

            this.$router.go(-1);

            debugger;

          },(res)=>{

            debugger;

            this.$message("修改项目失败,错误信息:"+res.data);

          }).catch((err)=>{

            this.$message("系统错误，修改项目失败,错误信息:"+err);

            debugger;

          });

        },()=>{

          console.log('user cancel');

        }).catch(() => {

          this.$message({
            type: 'warning',
            message: '错误，操作失败!'
          });

        });



      },
      cancel(){

        this.$confirm('确定要取消更新项目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$router.push({ name: "ProjectResponsibilityIndex"});

        },()=>{

          console.log('user cancel');

        }).catch(() => {

          this.$message({
            type: 'warning',
            message: '错误，操作失败!'
          });

        });

      },
      createFile(data){

        var name=data.data.filename;

        var url = this.BASE_URL+data.data.url;

        this.project.file.push({
          id:data.data.id
        });

      },
      closeLayer($event){

        if ($event.target.className.indexOf("add-dialog")<0){
          return ;
        }

        this.$router.go(-1);
      }
    }
  }
</script>
